<template>
  <div>
    <div class="container">
      <div class="c_banner">
        <div class="c_banner_title">{{ $t("新闻动态详情") }}</div>
        <img class="c_banner_img" src="~/assets/images/c_banner5.png" alt="" />
      </div>
      <div class="c_content">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">{{
            $t("首页")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'aboutUs' }">{{
            $t("关于我们")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'aboutUs?tabs=2' }">{{
            $t("新闻动态标题")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ newsData.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="100" style="margin-top: 56rem">
          <el-col :span="14">
            <div class="c_news_left">
              <div class="c_news_biaoti">
                {{ newsData.title }}
              </div>
              <div class="c_news_shijian">{{ newsData.create_time }}</div>
              <div class="c_news_richText">
                <div v-html="newsData.content"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="c_news_right">
              <div class="c_news_top">{{ $t("最新新闻") }}</div>
              <div
                class="c_news_card"
                v-for="item in newestData"
                :key="item.id"
                @click="switchNews(item.id)"
              >
                <div class="img-box">
                  <img class="c_news_img" :src="item.thumb" alt="" />
                </div>
                <div class="c_news_title">{{ item.title }}</div>
                <div class="c_news_time">{{ item.create_time }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="container_mobile">
      <div class="c_banner">
        <div class="c_banner_title">{{ $t("新闻动态详情") }}</div>
        <img class="c_banner_img" src="~/assets/images/c_banner5.png" alt="" />
      </div>
      <div class="c_content">
        <div class="c_news_biaoti">
          {{ newsData.title }}
        </div>
        <div class="c_news_shijian">{{ newsData.create_time }}</div>
        <div class="c_news_richText">
          <div v-html="newsData.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  async asyncData({ $indexApi, query }) {
    const res = await $indexApi.getNewsData({ id: query.id });
    const newest = await $indexApi.getNewsList();
    // console.log(res.data);

    return {
      newsData: res.data,
      newestData: newest.data,
    };
  },
  head() {
    return {
      title: this.newsData.seo_title,
      meta: [
        { name: this.newsData.seo_keywords, content: this.newsData.seo_desc },
      ],
    };
  },
  methods: {
    async switchNews(id) {
      const res = await this.$indexApi.getNewsData({ id: id });
      this.newsData = res.data;
    },
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .container_mobile {
    display: none;
  }
  .container {
    display: block;
    padding-bottom: 110rem;
    .c_banner {
      width: 100%;
      height: 620rem;
      position: relative;

      .c_banner_title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 60rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }

      .c_banner_img {
        width: 100%;
        height: 100%;
      }
    }
    .c_content {
      padding: 40rem 150rem;
      .c_news_left {
        .c_news_biaoti {
          font-size: 26rem;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
        }
        .c_news_shijian {
          font-size: 20rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          margin: 30rem 0 56rem 0;
        }
        .c_news_richText {
          font-size: 20rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          line-height: 36rem;
          :deep(img) {
            width: 100% !important;
            border-radius: 20rem;
          }
        }
      }
      .c_news_right {
        .c_news_top {
          font-size: 26rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
        }
        .c_news_card {
          margin-top: 20rem;
          margin-bottom: 60rem;
          cursor: pointer;
          &:hover {
            .c_news_img {
              transform: scale(1.2);
            }
          }
          .img-box {
            width: 100%;
            background: #c9c9c9;
            border-radius: 20rem;
            overflow: hidden;
          }
          .c_news_img {
            width: 100%;
            transition: 0.6s;
          }
          .c_news_title {
            font-size: 22rem;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #333333;
            margin: 16rem 0;
          }
          .c_news_time {
            font-size: 18rem;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #999999;
          }
        }
      }
    }
  }
}
@media (max-width: 900px) {
  .container {
    display: none;
  }
  .container_mobile {
    display: block;
    .c_banner {
      width: 100%;
      height: 240px;
      position: relative;

      .c_banner_title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }

      .c_banner_img {
        width: 100%;
        height: 100%;
      }
    }
    .c_content {
      padding: 20px 10px;
      .c_news_biaoti {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
      }
      .c_news_shijian {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
        margin: 14px 0;
      }
      .c_news_richText {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
        line-height: 30px;
        :deep(img) {
          width: 100% !important;
          border-radius: 7px;
        }
      }
    }
  }
}
</style>
